<template>
  <div class="outline">
    <div class="outline-list">
      <div v-for="(item, index) in outlineData" :key="index" :class="{ active: activeIndex === index }" class="outline-list-item" @click="clickListItem(index)">
        <span>{{ item.title }}</span>
        <el-icon v-if="status !== 'add' && outlineData.length > 1" @click.stop="clickListItemDelete(index)"><i-ep-Delete /></el-icon>
      </div>
      <el-button v-if="showAdd" @click="clickCancel">取消</el-button>
      <el-button v-else type="primary" @click="clickAdd">新增</el-button>
    </div>
    <div class="outline-content">
      <el-input v-model.trim="title" clearable placeholder="请输入大纲标题" />
      <el-input
        v-model="content"
        :autosize="false"
        :maxlength="10000"
        :input-style="{ height: 'calc(100vh - 124px)', marginBottom: '15px' }"
        resize="none"
        show-word-limit
        type="textarea"
        placeholder="请输入大纲内容"
      />
      <div class="outline-content-btns">
        <el-button type="primary" @click="clickSave">保存</el-button>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
/**
 * 大纲编辑
 */
import { ref, onMounted, toRaw } from "vue";
import { ElMessage, ElMessageBox } from "element-plus";
import "element-plus/es/components/message/style/css";
import "element-plus/es/components/message-box/style/css";
import { useBookStore } from "@/store/modules/bookStore";
const bookStore = useBookStore();

interface OutlineData {
  title: string;
  content: string;
}
let bookInfo: any = {};
// 是否展示新增操作
const showAdd = ref(false);
// 操作状态
const status = ref("");
// 大纲标题
const title = ref("");
// 大纲内容
const content = ref("");
// 所有大纲数据
const outlineData = ref<OutlineData[]>([]);
// 当前大纲列表激活项索引
const activeIndex = ref(0);

onMounted(() => {
  // 读取配置文件中的大纲相关数据
  if (bookStore.bookPath) {
    window.electronAPI.readFile(bookStore.bookPath + "/mzBook.json").then((res) => {
      if (res) {
        bookInfo = JSON.parse(res);
        outlineData.value = bookInfo.outline || [{ title: "大纲描述", content: "" }];
        title.value = outlineData.value[activeIndex.value].title;
        content.value = outlineData.value[activeIndex.value].content;
      }
    });
  }
});

// 删除指定大纲
const clickListItemDelete = (i: number) => {
  const title = outlineData.value[i].title;
  ElMessageBox.confirm(`确认要删除“${title}”这条大纲吗?`, "警告", {
    confirmButtonText: "确认",
    cancelButtonText: "取消",
    type: "warning"
  })
    .then(async () => {
      outlineData.value.splice(i, 1);
      if (i <= activeIndex.value) {
        activeIndex.value--;
        if (activeIndex.value <= 0) {
          activeIndex.value = 0;
        }
        clickListItem(activeIndex.value);
      }
      bookInfo = {
        ...bookInfo,
        outline: toRaw(outlineData.value)
      };
      window.electronAPI.writeFile(bookStore.bookPath + "/mzBook.json", JSON.stringify(bookInfo)).then((res) => {
        if (res) {
          ElMessage({
            type: "success",
            message: "已删除"
          });
        }
      });
    })
    .catch(() => {
      ElMessage({
        type: "info",
        message: "已取消删除"
      });
    });
};
// 点击大纲列表，选中
const clickListItem = (i: number, b?: boolean) => {
  if (!b && status.value === "add") return;
  activeIndex.value = i;
  title.value = outlineData.value[i].title;
  content.value = outlineData.value[i].content;
};
// 点击新增
const clickAdd = () => {
  status.value = "add";
  showAdd.value = true;
  outlineData.value.push({
    title: "大纲描述" + (outlineData.value.length + 1),
    content: ""
  });
  clickListItem(outlineData.value.length - 1, true);
};
// 点击取消
const clickCancel = () => {
  status.value = "";
  showAdd.value = false;
  outlineData.value.pop();
  clickListItem(outlineData.value.length - 1);
};
// 点击保存
const clickSave = () => {
  if (title.value) {
    outlineData.value[activeIndex.value].title = title.value;
    outlineData.value[activeIndex.value].content = content.value;
    bookInfo = {
      ...bookInfo,
      outline: toRaw(outlineData.value)
    };
    window.electronAPI.writeFile(bookStore.bookPath + "/mzBook.json", JSON.stringify(bookInfo)).then((res) => {
      if (res) {
        status.value = "";
        showAdd.value = false;
        ElMessage({
          message: "已保存",
          type: "success"
        });
      }
    });
  } else {
    ElMessage({
      message: "请填写大纲标题",
      type: "warning"
    });
  }
};
</script>

<style lang="scss" scoped>
.outline {
  height: 100vh;
  display: flex;
  align-items: flex-start;
  &-list {
    width: 230px;
    height: 100%;
    border-right: 1px solid var(--el-border-color);
    background-color: var(--el-bg-color);
    padding: 15px;
    box-sizing: border-box;
    overflow: auto;
    &-item {
      border-radius: 4px;
      height: 40px;
      line-height: 40px;
      border-bottom: 1px solid var(--el-border-color-lighter);
      font-size: 16px;
      padding: 0px 10px;
      cursor: pointer;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
      position: relative;
      &:hover,
      &.active {
        background-color: var(--el-bg-color-page);
        color: var(--el-color-primary);
      }
      &:hover {
        .el-icon {
          display: block;
        }
      }
      .el-icon {
        display: none;
        font-size: 18px;
        position: absolute;
        right: 15px;
        top: 50%;
        transform: translateY(-50%);
      }
    }
    .el-input {
      width: 100%;
      margin-top: 15px;
    }
    .el-button {
      width: 100%;
      margin-top: 15px;
    }
  }
  &-content {
    flex: 1;
    height: 100%;
    padding: 15px;
    box-sizing: border-box;
    .el-input {
      margin-bottom: 15px;
    }
    &-btns {
      text-align: right;
    }
  }
}
</style>
